import React from 'react'
import { SearchBar } from 'antd-mobile';
import '../../assets/css/search.css'
import SearchBarExampleSon from './SearchBarExampleSon/SearchBarExampleSon'

class SearchBarExample extends React.Component {
    constructor() {
        super()
        // 初始化状态值
        this.state = {
            value: ''
        }
    }

    changeState(input) {
        // 改变初始化状态值，用于向下传递
        this.setState({
            value: input
        })
        // 判断输入框里是否为空，如果为空不再向后台发送数据请求
        if(input) {
            this.props.searchRequest(input)
        }else{

        }
    }

    render() {
        // console.log(this.state.value);
        // console.log(this.props);
        return (<div className='mxx_search'>
            <SearchBar placeholder="搜索歌手、歌曲、专辑"  maxLength={8} onChange={this.changeState.bind(this)} />
            <SearchBarExampleSon state={this.state.value} {...this.props} />
        </div>)
    }
}

export default SearchBarExample